<template>
  <div
    class="app-container"
    :style="`min-height: ${pageMinHeight}px;height:${pageMinHeight}px`"
  >
    <a-button @click="goToPage">跳转第3页</a-button>
    <a-button @click="toggleToolbar">隐藏工具栏</a-button>
    <a-button @click="toggleSidebar">隐藏侧边栏</a-button>
    <a-button @click="exportPdf">导出pdf</a-button>
    <a-button @click="exportExcel">导出excel</a-button>
    <a-button @click="exportHtml">导出html</a-button>
    <!-- v-bind:report="{ Uri: '../demo.rdlx-json' }" -->
    <div id="viewer-host">
      <JSViewer ref="reportViewer" language="zh"></JSViewer>
    </div>
  </div>
</template>
<script>
  import { mapState, mapGetters } from 'vuex'
  import { Viewer } from '@grapecity/activereports-vue'
  // import '@grapecity/activereports/styles/ar-js-ui.css'
  // import '@grapecity/activereports/styles/ar-js-viewer.css'
  import '@grapecity/activereports/pdfexport'
  import '@grapecity/activereports/htmlexport'
  import '@grapecity/activereports/xlsxexport'
  import '@grapecity/activereports-localization'
  import '@grapecity/activereports-localization/dist/ar-js-locales'
  import { Core } from '@grapecity/activereports'
  Core.FontStore.registerFonts('/fonts/fontConfig.json')

  export default {
    name: 'App',
    components: {
      JSViewer: Viewer,
    },
    data() {
      return {
        viewer: null,
      }
    },
    computed: {
      ...mapGetters('setting', ['pageMinHeight']),
      ...mapGetters('account', ['user']),
      ...mapState('setting', ['componentSize', 'loading']),
    },
    watch: {},
    mounted() {
      // setTimeout(() => {
      //   document
      //     .getElementsByClassName('arjs-textBoxItem')[0]
      //     .parentNode.removeChild(
      //       document.getElementsByClassName('arjs-textBoxItem')[0]
      //     )
      // }, 500)

      this.viewer = this.$refs.reportViewer.Viewer()
      // this.viewer.registerFont('/fonts/fontConfig.json')
      this.viewer.open('/template/demo.rdlx-json')
    },
    methods: {
      handleSubmit() {},
      goToPage() {
        this.viewer.goToPage(3)
      },
      toggleToolbar() {
        this.viewer.toggleToolbar()
      },
      toggleSidebar() {
        this.viewer.toggleSidebar() //隐藏侧边栏。
      },
      exportPdf() {
        var settings = { title: 'test', userPassword: '' }
        var cancelCallback = function () {
          return false
        }
        this.viewer
          .export('pdf', settings, { cancel: cancelCallback })
          .then((result) => result.download('Exported_PDF'))
        // var ARJS = Core
        // ARJS.FontStore.registerFonts('../fonts/fontsConfig.json')
        // var PDF = PdfExport
        // // PdfExport.registerPdfFont({ name: '微软雅黑', source: '../msyh.ttf' })
        // var settings = {
        //   info: {
        //     title: '快递单',
        //     author: 'GrapeCity inc.',
        //   },
        //   pdfVersion: '1.7',
        //   fonts: { name: '微软雅黑', source: '../msyh.ttf' },
        // }
        // var pageReport = new ARJS.PageReport()
        // pageReport
        //   .load('../Chinese.rdlx-json')
        //   .then(function () {
        //     return pageReport.run()
        //   })
        //   .then(function (pageDocument) {
        //     return PDF.exportDocument(pageDocument, settings)
        //   })
        //   .then(function (result) {
        //     result.download('arjs-pdf')
        //   })
      },

      exportExcel() {
        var settings = { title: 'test', userPassword: '' }
        var cancelCallback = function () {
          return false
        }
        this.viewer
          .export('xlsx', settings, { cancel: cancelCallback })
          .then((result) => result.download('Exported_PDF'))
      },
      exportHtml() {
        var settings = { title: 'test', userPassword: '' }
        var cancelCallback = function () {
          return false
        }
        this.viewer
          .export('html', settings, { cancel: cancelCallback })
          .then((result) => result.download('Exported_PDF'))
      },
    },
  }
</script>

<style scoped lang="less">
  /deep/ .ant-layout-sider {
    position: relative;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    background: white;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  // /deep/ div.arjs-textBoxItem {
  //   display: none !important;
  // }
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>
